<template>
  <div class="whyselect">
      <div class="whyselect-box">
          <div class="whyselect-title">
              <p><span>选择我们产品的理由</span></p>
              <section>用最有机的食品回馈用户</section>
          </div>
          <div class="whyselect-list">
              <div>
                  <ul class="left">
                      <li>
                          <div>
                              <p><span>多种口味</span></p>
                              <section>不同的心情选择不同的口味，适合不</section>
                              <section>一样的你</section>
                          </div>
                          <div><img src="../assets/images/pingzi.png" alt=""></div>
                      </li>
                      <li>
                          <div>
                              <p><span>专业设备</span></p>
                              <section>用最好的设备才能做出最好的产品出</section>
                              <section>来</section>
                          </div>
                          <div><img src="../assets/images/shebei.png" alt=""></div>
                      </li>
                      <li>
                          <div>
                              <p><span>精心研磨</span></p>
                              <section>只有用心的去做食物，它的香味才会</section>
                              <section>由内到外</section>
                          </div>
                          <div><img src="../assets/images/yanmo.png" alt=""></div>
                      </li>
                  </ul>
              </div>
              <div class="center">
                  <img src="../assets/images/feiliao.png" alt="">
              </div>
              <div>
                  <ul>
                      <li>
                          <div><img src="../assets/images/pingzi.png" alt=""></div>
                          <div>
                              <p><span>多种口味</span></p>
                              <section>不同的心情选择不同的口味，适合不</section>
                              <section>一样的你</section>
                          </div>
                          
                      </li>
                      <li>
                          <div><img src="../assets/images/shebei.png" alt=""></div>
                          <div>
                              <p><span>专业设备</span></p>
                              <section>用最好的设备才能做出最好的产品出</section>
                              <section>来</section>
                          </div>
                          
                      </li>
                      <li>
                          <div><img src="../assets/images/yanmo.png" alt=""></div>
                          <div>
                              <p><span>精心研磨</span></p>
                              <section>只有用心的去做食物，它的香味才会</section>
                              <section>由内到外</section>
                          </div>
                          
                      </li>
                  </ul>
              </div>
          </div>
          <div class="whyselect-serve">
            <div class="whyselect-serve-title">
              <p><span>我们的服务</span></p>
              <section>用最好的服务回馈用户</section>
          </div>
          <div class="whyselect-serve-table">
              <table>
                  <tr>
                      <td :class="{animate14:isShow,wo:isHidden}">
                          <div class="single-td">
                          <div><img src="../assets/images/car.png" alt=""></div>
                          <div>
                              <p><span>陆地运输</span></p>
                              <section>依法推进农业标准化生产，提高农产品质量安全水平关爱生命，呵护健康，关注农产品质量安全 . . .</section>
                          </div>
                          </div>
                      </td>
                      <td :class="{animate15:isShow,wo:isHidden}">
                          <div class="single-td">
                          <div><img src="../assets/images/ship.png" alt=""></div>
                          <div>
                              <p><span>水上运输</span></p>
                              <section>依法推进农业标准化生产，提高农产品质量安全水平关爱生命，呵护健康，关注农产品质量安全. . .</section>
                          </div>
                          </div>
                      </td>
                  </tr>
                  <tr>
                      <td :class="{animate16:isShow,wo:isHidden}">
                          <div class="single-td">
                          <div><img src="../assets/images/plane.png" alt=""></div>
                          <div>
                              <p><span>航空运输</span></p>
                              <section>依法推进农业标准化生产，提高农产品质量安全水平关爱生命，呵护健康，关注农产品质量安全. . .</section>
                          </div>
                          </div>
                      </td>
                      <td :class="{animate17:isShow,wo:isHidden}">
                          <div class="single-td">
                          <div><img src="../assets/images/camera.png" alt=""></div>
                          <div>
                              <p><span>安全保证</span></p>
                              <section>依法推进农业标准化生产，提高农产品质量安全水平关爱生命，呵护健康，关注农产品质量安全. . .</section>
                          </div>
                          </div>
                      </td>
                  </tr>
                  <tr>
                      <td :class="{animate18:isShow,wo:isHidden}">
                          <div class="single-td">
                          <div><img src="../assets/images/tree.png" alt=""></div>
                          <div>
                              <p><span>绿色有机</span></p>
                              <section>依法推进农业标准化生产，提高农产品质量安全水平关爱生命，呵护健康，关注农产品质量安全. . .</section>
                          </div>
                          </div>
                      </td>
                      <td :class="{animate19:isShow,wo:isHidden}">
                          <div class="single-td">
                          <div><img src="../assets/images/cap.png" alt=""></div>
                          <div>
                              <p><span>冠军口碑</span></p>
                              <section>依法推进农业标准化生产，提高农产品质量安全水平关爱生命，呵护健康，关注农产品质量安全. . .</section>
                          </div>
                          </div>
                      </td>
                  </tr>
              </table>
          </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
            return {
                isShow:false,
                isHidden:true  
            }
        }, 
        mounted(){
            window.addEventListener('scroll',function(){ 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
                if(scrollTop >= 900){
                   this.isShow = true;
                   this.isHidden = false;
            }
        }.bind(this))
    }
};
</script>
<style scoped>
p {
  margin: 0;
  padding: 0;
}
section {
  font-size: 14px;
  color: gray;
  line-height: 1.6;
}

.whyselect-box {
  width: 1250px;
  margin: 100px auto;
}
.whyselect-title {
  text-align: center;
}
.whyselect-title p {
  font-size: 36px;
  color: rgb(60, 38, 23);
  font-family: SimSuncss;
}
.whyselect-list {
  display: flex;
  margin-top: 60px;
}
.whyselect-list ul {
  margin: 0;
  padding: 0;
}
.whyselect-list .left {
  text-align: right;
}
.whyselect-list ul li {
  width: 406px;
  height: 110px;
  margin-bottom: 80px;
  list-style: none;
  display: flex;
  justify-content: space-around;
}
.whyselect-list ul li p {
  font-size: 18px;
  margin-bottom: 10px;
  color: #575c5c;
}
.whyselect-list ul li img {
  margin-top: 10px;
}
.whyselect-list .center {
  width: 388px;
  height: 441px;
  text-align: center;
}
.whyselect-serve {
  width: 1200px;
  height: 600px;
  margin: 30px auto;
}
.whyselect-serve-title {
  text-align: center;
}
.whyselect-serve-title p {
  font-size: 30px;
  color: rgb(60, 38, 23);
  font-family: SimSuncss;
}
.whyselect-serve-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
}
.whyselect-serve-table p{
    font-size: 18px;
    color: gray;
    margin-bottom: 10px;
}
.whyselect-serve-table img{
    filter: grayscale(1);
    opacity: 0.8;
    transition: all .3s;
}
.whyselect-serve-table td:hover img{
    transform: scale(1.3);
    filter: grayscale(0);
    opacity: 1;
}

td {
  width: 607px;
  height: 157px;
  border: 1px solid #ccc;
  
}
.single-td {
  display: flex;
   
}
.single-td div:nth-of-type(1){
    width: 40%;
    text-align: center;
    margin-top: 15px;
}
.single-td div:nth-of-type(2){
    padding-right: 70px;
}

</style>
